/**
 * 获取元素
 */
let loginSpan = document.querySelectorAll('.login-a span')
let loginInput = document.querySelectorAll('.login-input p')
let loginIn =document.querySelector('.loginin')
let loginTo =document.querySelector('.loginto')
let loginInp =document.querySelector('.login-input')
let saoMa =document.querySelector('.saoma')
let saoMaTow =document.querySelector('.saoma2')
let body =document.querySelector('body')
let h1 = document.querySelector('h1 ') 
let h2 = document.querySelector('h2 ') 
let h3 = document.querySelector('h3') 
let h4 = document.querySelector('h4 ') 
let login = document.querySelector('.login ') 
let loginP = document.querySelectorAll('.login p') 
let loginSp = document.querySelectorAll('.login span') 
/**
 * 点击切换背景和激活样式
 */
let index = 0

 loginSpan.forEach(function(dom,i){
    dom.addEventListener('click',function(){
            loginSpan[index].classList.remove('active')
            this.classList.add('active')
            index = i
    })

 })

 loginTo.addEventListener('click',function(){
    loginInp.style.display = 'none'
    saoMa.style.display = 'block'
    saoMaTow.style.display = 'none'
    body.style.background = `
    url('../imgs/bg2.jpg')no-repeat center `
    body.style.backgroundSize ='cover'
    login.style.background ='rgba(0,0,0,.8)'
    loginP.forEach(function(dom){
      dom.style.color = '#fff'
    })

    loginSp.forEach(function(v){
      v.style.color = '#fff'
    })
 })

 loginIn.addEventListener('click',function(){
    loginInp.style.display = 'block'
    saoMa.style.display = 'none'
    saoMaTow.style.display = 'block'
    body.style.background = `
    url('../imgs/bg.jpg')no-repeat center `
    body.style.backgroundSize ='cover'

    login.style.background ='rgba(255,255,255,.8)'
    loginP.forEach(function(dom){
      dom.style.color = '#000'
    })

    loginSp.forEach(function(v){
      v.style.color = '#000'
    })
 })

 loginInput.forEach(function(v){
     v.addEventListener('mouseover',function(){
        this.classList.add('yangs')
     })

     v.addEventListener('mouseout',function(){
        this.classList.remove('yangs')
     })
 })
 



    window.addEventListener('load',function(){
        h1.style.transform = 'translateY(-100px)'
        h2.style.transform = 'translateY(-50px)'
        h3.style.transform = 'translateY(0px)'
     
})









